<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改学生信息</title>
    <style>
        main {
            width: 300px;
            margin: 0 auto;
            border: 1px solid gray;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <main>
        <h1>修改学生信息</h1>
        <form action="" method="post">
            <p>学号: <input type="text" id="id"></p>
            <p>班级: <input type="text" name="clazz" id="clazz"></p>
            <p>姓名: <input type="text" name="name" id="name"></p>
            <p>性别:
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女
            </p>
            <p>年龄: <input type="text" name="age" id="age"></p>
            <p>爱好:
                <input type="checkbox" name="hobby" value="吃饭">吃饭
                <input type="checkbox" name="hobby" value="睡觉">睡觉
                <input type="checkbox" name="hobby" value="学习">学习
            </p>
            <p>电话: <input type="text" name="tel" id="tel"></p>
            <p>地址: <select name="address">
                    <option value="焦作">焦作</option>
                    <option value="安阳">安阳</option>
                    <option value="周口">周口</option>
                    <option value="信阳">信阳</option>
                    <option value="郑州">郑州</option>
                    <option value="洛阳">洛阳</option>
                </select></p>
            <p>备注: <textarea name="remark" cols="30" rows="10" id="remark"></textarea></p>
            <p>入学时间: <input type="date" id="date" name="date" id="date"></p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </main>
    <script src="./js/utils.js"></script>
    <script>
        //从网址链接上获得要修改的信息的id
        var id = window.location.hash.substring(1);

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    //获得将要修改的所有信息
                    var stu = JSON.parse(xhr.responseText)[0];
                    //将获得的信息初始化到表单里
                    document.querySelector('#id').value = stu.id;
                    document.querySelector("#clazz").value = stu.clazz;
                    document.querySelector("#name").value = stu.name;
                    document.querySelector("#age").value = stu.age;
                    //获得性别
                    // if (stu.gender == "男") {
                    //   document.querySelectorAll("input[name=gender]")[0].checked = true
                    // } else {
                    //   document.querySelectorAll("input[name=gender]")[1].checked = true
                    // }
                    document.querySelector('input[value="' + stu.gender + '"]').checked = true;
                    //<option value="郑州">郑州</option>
                    document.querySelector('option[value="' + stu.address + '"]').selected = true;
                    //获得爱好
                    if (stu.hobby.includes('吃饭')) {
                        document.querySelectorAll("input[name='hobby']")[0].checked = true;
                    }
                    if (stu.hobby.includes('睡觉')) {
                        document.querySelectorAll("input[name='hobby']")[1].checked = true;
                    }
                    if (stu.hobby.includes('学习')) {
                        document.querySelectorAll("input[name='hobby']")[2].checked = true;
                    }
                    document.querySelector("#tel").value = stu.tel;
                    document.querySelector("#remark").value = stu.remark;
                    document.querySelector("#date").value = stu.date;
                }
            }
        }
        var url = "http://localhost:3008/api/student/getStudent?id=" + id;
        xhr.open("GET", url);
        // 4. 发送请求
        xhr.send();

        var form = document.querySelector('form')
        form.onsubmit = function (e) {
            e.preventDefault();//阻止表单跳转

            // var clazz = document.querySelector('#class').value
            // console.log(clazz);
            // var uname = document.querySelector('#name').value
            // console.log(uname);

            // var data = "clazz=" + clazz + "&name=" + uname;

            var data = serializeKeyValue(this);
            // 1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 2. 添加状态改变的回调函数,
            xhr.onreadystatechange = function () {
                //5 判断请求状态为4
                if (xhr.readyState == 4) {
                    // 6 判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        window.location.href = "01-首页.html";
                    }
                }
            }
            // 3. 打开连接设置请求方式和URL
            var url = "http://localhost:3008/api/student/updateStudent";
            xhr.open("POST", url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 4. 发送请求
            xhr.send(data);
        }
    </script>
</body>

</html>